﻿<!DOCTYPE html>

<html lang="en" xmlns="http://www.w3.org/1999/xhtml">
<head>
    <meta charset="utf-8" />
    <title>空运</title>
    <style>
        body {
            padding: 0px;
            margin: 0px;
            background-image: url('./images/s4-2/bg.jpg');
            background-repeat: no-repeat;
        }
        text {
            font: 10px sans-serif;
            text-anchor: middle;
            fill: white;
        }

    </style >
    <script src="./assets/echarts.min.js"></script>
    <script src="./assets/world.js"></script>
    <script src="./assets/d3.v4.min.js"></script>
    <script src="./assets/jquery.js"></script>
    <script src="./assets/jzcode.js"></script>
    <script src="./assets/jzcode.event.local.js"></script>
</head>
<body>
    <canvas id="cavans2" style="position:absolute;top:0px; left:0px;" width='1920' height='1080'></canvas>
    <script src="./content/s0-charts.js"></script>
    <script src="./content/s0-event.js"></script>
    <script>
        var _cxt = null;
        var g_interval = 30;
        var g_size = { w: 1920, h: 1080 };
        var g_dataList = [];

        var g_stepCurrent = null;
        var g_stepMax = 10;
        
        var g_posCurrent = 0;
        var g_posMax = 3;
        var g_isShowPosDesc = false;
        //  步骤切换时间
        var g_stepInterval = 1000;
        function JzTimer(interval, callback){
            this.interval = interval;
            this.callback = callback;
            this.ticks = 0;
            this.update = function (delta) {
                this.ticks += delta;
                if (this.ticks > this.interval) {
                    this.ticks = 0;
                    this.callback();
                }
                for (var index = 0; index < this._children.length; index++) {
                    this._children[index].update(delta);
                }
            };

            // common
            this._children = [];
            this.addChild = function (child) {
                this._children.push(child);
            };
            this.addChildRange = function (children) {
                for (var index = 0; index < children.length; index++) {
                    this._children.push(children[index]);
                }
            };
        };

        function JzWaitTimer(time) {
            this._isRuning = false;
            this._time = time;
            this._ticks = 0;
            this.update = function (delta) {
                if (this._isRuning) {
                    this._ticks += delta;
                }
            }

            // 判断读秒是否完成，true：需要等待，false：完成
            this.wait = function () {
                if (this._ticks > this._time) {
                    this._isRuning = false;
                    return false;
                }
                return true;
            }
            // 启动读秒
            this.start = function () {
                this._isRuning = true;
            }
            // 重置时间但是启动读秒
            this.reset = function () {
                this._ticks = 0;
                this._isRuning = false;
            }
        }

        var g_nodes = [];
        function Plane() {
            this._pos = { x: 110, y: 376 };
            this._animationArr = [];
            this.getPos = function () {
                return this._pos;
            }
            this.setPos = function (pos) {
                this._pos.x = pos.x;
                this._pos.y = pos.y;
            }
            this.addAnimation = function (animation) {
                this._animationArr.push(animation);
            }
            this.update = function (delta) {
                for (var index = 0; index < this._animationArr.length; index++) {
                    this._animationArr[index].update(this, delta);
                }
                
                // remove completed animation
                for (var index = 0; index < this._animationArr.length; ) {
                    if (this._animationArr[index].isCompleted()) {
                        this._animationArr.splice(index, 1);
                    } else {
                        index++;
                    }
                }
            }

            this.render = function (ctx) {
                ctx.drawImage(g_planeArr[g_posCurrent].tex2D,
                    this._pos.x - g_planeArr[g_posCurrent].offset.x,
                    this._pos.y - g_planeArr[g_posCurrent].offset.y);
            }
        }
        function JzAniMoveTo(duration, targetPos) {
            this._life = 0;
            this._duration = duration;
            this._targetPos = targetPos;
            this._speed = null;
            this._isCompleted = false;
            this.isCompleted = function () {
                return this._isCompleted;
            }
            this.update = function (node, delta) {
                if (this._isCompleted) {
                    return;
                }
                if (this._speed == null) {
                    var pos = node.getPos();
                    this._speed = { x: (this._targetPos.x - pos.x) / this._duration, y: (this._targetPos.y - pos.y) / this._duration };
                }
                node._pos.x += this._speed.x * delta;
                node._pos.y += this._speed.y * delta;
                this._life += delta;
                if (this._life >= this._duration) {
                    node._pos.x = this._targetPos.x;
                    node._pos.y = this._targetPos.y;
                    this._isCompleted = true;
                } else {
                    if (this._speed.x > 0 && node._pos.x > this._targetPos.x) {
                        node._pos.x = this._targetPos.x;
                    } else if (this._speed.x < 0 && node._pos.x < this._targetPos.x) {
                        node._pos.x = this._targetPos.x;
                    }

                    if (this._speed.y > 0 && node._pos.y > this._targetPos.y) {
                        node._pos.y = this._targetPos.y;
                    } else if (this._speed.y < 0 && node._pos.y < this._targetPos.y) {
                        node._pos.y = this._targetPos.y;
                    }
                }
            }
        }

        function JzAniSequence(animations) {
            this._animations = animations;
            this._isCompleted = false;
            this.isCompleted = function () {
                return this._isCompleted;
            }
            this.update = function (node, delta) {
                for (var index = 0; index < this._animations.length; index++) {
                    if (!this._animations[index]._isCompleted) {
                        this._animations[index].update(node, delta);
                        break;
                    }
                }
                for (var index = 0; index < this._animations.length; index++) {
                    if (!this._animations[index]._isCompleted) {
                        this._isCompleted = false;
                        return;
                    }
                }
                this._isCompleted = true;
            }
        }
        function JzAniFunc(callback, data) {
            this._callback = callback;
            this._data = data;
            this._isCompleted = false;
            this.isCompleted = function () {
                return this._isCompleted;
            }
            this.update = function (node, delta) {
                this._callback(data);
                this._isCompleted = true;
            }
        }
        function JzAniWait(duration) {
            this._life = 0;
            this._duration = duration;
            this._isCompleted = false;
            this.isCompleted = function () {
                return this._isCompleted;
            }
            this.update = function (node, delta) {
                if (this._isCompleted) {
                    return;
                }
                this._life += delta;
                if (this._life >= this._duration) {
                    this._isCompleted = true;
                }
            }
        }

        function updatePlane() {
            var plane = g_planeArr[g_posCurrent];
            var step = g_stepCurrent;
            if (step < 0) {
                step = 0;
            }
            if (step == g_stepMax - 1) {
                return;
            }
            else {
                var curPos = g_planePosArr[step];
                var targetPos = g_planePosArr[step + 1];
                var speedX = (targetPos[0] - curPos[0]) / g_stepInterval;
            }
        }

        var plane = new Plane();
        var g_wait = new JzWaitTimer(3000);
      
        var g_timer = new JzTimer(10, function () {
            return;
            if (g_stepCurrent >= g_stepMax - 1) {
                g_wait.start();
                if (g_wait.wait()) {
                    g_stepCurrent = g_stepMax - 1;
                    g_isShowPosDesc = true;
                } else {
                    g_wait.reset();
                    g_stepCurrent = -1;
                    g_isShowPosDesc = false;

                    g_posCurrent++;
                    if (g_posCurrent >= g_posMax) {
                        g_posCurrent = 0;
                    }
                }
            }

            for (var index = 0; index < g_posArr.length; index++) {
                if (index == g_posCurrent) {
                    g_posArr[index].show = true;
                    g_posDescArr[index].show = true;
                } else {
                    g_posArr[index].show = false;
                    g_posDescArr[index].show = false;
                }
            }

            for (var index = 0; index < g_nodeArr.length; index++) {
                if (index <= g_stepCurrent) {
                    g_nodeArr[index].isActived = true;
                } else {
                    g_nodeArr[index].isActived = false;
                }
            }
        });
        g_timer.addChildRange(g_wait);

        var g_planePosArr = [[110, 376], [298, 376], [486, 376], [677, 376], [865, 376], [1054, 376], [1242, 376], [1425, 376], [1612, 376], [1798, 376]];
        var g_planeArr = [{
            size: { w: 308, h: 56 },
            offset: { x: 145, y: 30 }, url: './images/s4-2/p0-plane.png'
        }, {
            size: { w: 308, h: 56 },
        offset: { x: 145, y: 30 }, url: './images/s4-2/p1-plane.png'
        }, {
            size: { w: 308, h: 56 },
            offset: { x: 145, y: 30 }, url: './images/s4-2/p2-plane.png'
        }];
        var g_sActiveBGTex2D = null;
        var g_nodeArr = [{
            show: true,
            pos: { x: 51, y: 129 },
            offset: { x: 0, y: 0 },
            size:{w:124,h:132},
            url: './images/s4-2/s0-bg.png',
            data: {
                pos: { x: 0, y: 15, alignV: 'center', alignH: 'center' },
                color: 'yellow',
                url: 'http://172.30.13.36:8080/api/wtsld/total?name=cust',
                value: 0
            },
            isActived: false
        }, {
            show: true,
            pos: { x: 236, y: 138 },
            offset: { x: 0, y: 0 },
            size:{w:124,h:132},
            url: './images/s4-2/s1-bg.png',
            data: {
                pos: { x: 0, y: 15, alignV: 'center', alignH: 'center' },
                color: 'yellow',
                url: 'http://172.30.13.36:8080/api/wtsld/total?name=cust',
                value: 0
            },
            isActived: false
        }, {
            show: true,
            pos: { x: 426, y: 150 },
        offset: { x: 0, y: 0 },
        size:{w:124,h:132},
            url: './images/s4-2/s2-bg.png',
            data: {
                pos: { x: 0, y: 15, alignV: 'center', alignH: 'center' },
                color: 'yellow',
                url: 'http://172.30.13.36:8080/api/wtsld/total?name=cust',
                value: 0
            },
            isActived: false
        }, {
            show: true,
            pos: { x: 613, y: 164 },
            offset: { x: 0, y: 0 },
            size:{w:124,h:132},
            url: './images/s4-2/s3-bg.png',
            data: {
                pos: { x: 0, y: 15, alignV: 'center', alignH: 'center' },
                color: 'yellow',
                url: 'http://172.30.13.36:8080/api/wtsld/total?name=cust',
                value: 0
            },
            isActived: false
        }, {
            show: true,
            pos: { x: 802, y: 208 },
        offset: { x: 0, y: 0 },
        size:{w:124,h:132},
            url: './images/s4-2/s4-bg.png',
            data: {
                pos: { x: 0, y: 15, alignV: 'center', alignH: 'center' },
                color: 'yellow',
                url: 'http://172.30.13.36:8080/api/wtsld/total?name=cust',
                value: 0
            },
            isActived: false
        }, {
            show: true,
            pos: { x: 990, y: 207 },
            offset: { x: 0, y: 0 },
            size:{w:124,h:132},
            url: './images/s4-2/s5-bg.png',
            data: {
                pos: { x: 0, y: 15, alignV: 'center', alignH: 'center' },
                color: 'yellow',
                url: 'http://172.30.13.36:8080/api/wtsld/total?name=cust',
                value: 0
            },
            isActived: false
        }, {
            show: true,
            pos: { x: 1177, y: 164 },
        offset: { x: 0, y: 0 },
        size:{w:124,h:132},
            url: './images/s4-2/s6-bg.png',
            data: {
                pos: { x: 0, y: 15, alignV: 'center', alignH: 'center' },
                color: 'yellow',
                url: 'http://172.30.13.36:8080/api/wtsld/total?name=cust',
                value: 0
            },
            isActived: false
        }, {
            show: true,
            pos: { x: 1367, y: 150 },
            offset: { x: 0, y: 0 },
            size:{w:124,h:132},
            url: './images/s4-2/s7-bg.png',
            data: {
                pos: { x: 0, y: 15, alignV: 'center', alignH: 'center' },
                color: 'yellow',
                url: 'http://172.30.13.36:8080/api/wtsld/total?name=cust',
                value: 0
            },
            isActived: false
        }, {
            show: true,
            pos: { x: 1553, y: 137 },
        offset: { x: 0, y: 0 },
        size:{w:124,h:132},
            url: './images/s4-2/s8-bg.png',
            data: {
                pos: { x: 0, y: 15, alignV: 'center', alignH: 'center' },
                color: 'yellow',
                url: 'http://172.30.13.36:8080/api/wtsld/total?name=cust',
                value: 0
            },
            isActived: false
        }, {
            show: true,
            pos: { x: 1743, y: 127 },
            offset: { x: 0, y: 0 },
            size: { w: 124, h: 132 },
            url: './images/s4-2/s9-bg.png',
            data: {
                pos: { x: 0, y: 15, alignV: 'center', alignH: 'center' },
                color: 'yellow',
                url: 'http://172.30.13.36:8080/api/wtsld/total?name=cust',
                value: 0
            },
            isActived: false
        }];

        
        var g_posArr = [{
            show: false,
            pos: { x: 828, y: 597 },
            offset: { x: 0, y: 0 },
            size: { w: 43, h: 22 },
            url: './images/s4-2/pos-bg.png'
        }, {
            show: false,
            pos: { x: 857, y: 587 },
            offset: { x: 0, y: 0 },
            size: { w: 43, h: 22 },
            url: './images/s4-2/pos-bg.png'
        }, {
            show: false,
            pos: { x: 772, y: 625 },
            offset: { x: 0, y: 0 },
            size: { w: 43, h: 22 },
            url: './images/s4-2/pos-bg.png'
        }];

        var g_posDescArr = [{
            show: false,
            pos: { x: 102, y: 280 },
            offset: { x: 0, y: 0 },
            url: './images/s4-2/p0-desc.png'
        }, {
            show: false,
            pos: { x: 102, y: 280 },
            offset: { x: 0, y: 0 },
            url: './images/s4-2/p1-desc.png'
        }, {
            show: false,
            pos: { x: 102, y: 280 },
            offset: { x: 0, y: 0 },
            url: './images/s4-2/p2-desc.png'
        }];

        function flyToNext() {
            if (g_stepCurrent == null) {
                g_stepCurrent = 0;
                // first
                plane.addAnimation(new JzAniSequence([new JzAniWait(2000),
                    new JzAniMoveTo(2000, { x: g_planePosArr[g_stepCurrent + 1][0], y: g_planePosArr[g_stepCurrent + 1][1] }),
                    new JzAniFunc(function () {
                        flyToNext();
                    }, null)]));
            } else {
                g_stepCurrent++;

                if (g_stepCurrent >= g_stepMax - 1) {
                    g_stepCurrent = g_stepMax - 1;
                    g_isShowPosDesc = true;
                    g_stepCurrent = null;
                    window.setTimeout(function () {
                        plane.setPos({ x: g_planePosArr[0][0], y: g_planePosArr[0][1] })
                        flyToNext();
                    }, 3000);
                }
                else {
                    plane.addAnimation(new JzAniSequence([new JzAniWait(2000),
                        new JzAniMoveTo(2000, { x: g_planePosArr[g_stepCurrent + 1][0], y: g_planePosArr[g_stepCurrent + 1][1] }),
                        new JzAniFunc(function () {
                            flyToNext();
                        }, null)]));
                }
                for (var index = 0; index < g_posArr.length; index++) {
                    if (index == g_posCurrent) {
                        g_posArr[index].show = true;
                        g_posDescArr[index].show = true;
                    } else {
                        g_posArr[index].show = false;
                        g_posDescArr[index].show = false;
                    }
                }

                for (var index = 0; index < g_nodeArr.length; index++) {
                    if (index <= g_stepCurrent) {
                        g_nodeArr[index].isActived = true;
                    } else {
                        g_nodeArr[index].isActived = false;
                    }
                }
            }
        }
        function init() {
            g_nodes.push(plane);

            flyToNext();

            _cxt = document.getElementById('cavans2').getContext("2d");
            
            g_sActiveBGTex2D = new Image();
            g_sActiveBGTex2D.src = jzcode.res.getUrl('./images/s4-2/s-active-bg.png');

            for (var index = 0; index < g_planeArr.length; index++) {
                var image = new Image();
                image.src = jzcode.res.getUrl(g_planeArr[index].url);
                g_planeArr[index].tex2D = image;
            }

            for (var index = 0; index < g_posArr.length; index++) {
                var image = new Image();
                image.src = jzcode.res.getUrl(g_posArr[index].url);
                g_posArr[index].tex2D = image;
            }
            for (var index = 0; index < g_posDescArr.length; index++) {
                var image = new Image();
                image.src = jzcode.res.getUrl(g_posDescArr[index].url);
                g_posDescArr[index].tex2D = image;
            }

            for (var index = 0; index < g_nodeArr.length; index++) {
                var image = new Image();
                image.src = jzcode.res.getUrl(g_nodeArr[index].url);
                g_nodeArr[index].tex2D = image;
            }

            for (var index = 0; index < g_nodeArr.length; index++) {
                if (g_nodeArr[index].data) {
                    g_dataList.push({ tag: g_nodeArr[index].data, url: g_nodeArr[index].data.url, waiting: 3600000, isLoading: false });
                }
            }

            window.setInterval(function () {
                Render();
                DataLoop(g_interval);
                g_timer.update(g_interval);
            }, g_interval);
        }

        function Render() {

            _cxt.clearRect(0, 0, g_size.w, g_size.h);

            for (var indexOfNode = 0; indexOfNode < g_nodeArr.length; indexOfNode++) {
                if (g_nodeArr[indexOfNode].show) {

                    if (g_nodeArr[indexOfNode].isActived) {
                        
                        _cxt.drawImage(g_sActiveBGTex2D,
                            g_nodeArr[indexOfNode].pos.x - g_nodeArr[indexOfNode].offset.x - 28,
                            g_nodeArr[indexOfNode].pos.y - g_nodeArr[indexOfNode].offset.y - 30);
                    }

                    _cxt.drawImage(g_nodeArr[indexOfNode].tex2D,
                        g_nodeArr[indexOfNode].pos.x - g_nodeArr[indexOfNode].offset.x,
                        g_nodeArr[indexOfNode].pos.y - g_nodeArr[indexOfNode].offset.y);
                }
            }

            if (g_isShowPosDesc == true) {
                for (var indexOfNode = 0; indexOfNode < g_posDescArr.length; indexOfNode++) {
                    if (g_posDescArr[indexOfNode].show) {
                        _cxt.drawImage(g_posDescArr[indexOfNode].tex2D,
                            g_posDescArr[indexOfNode].pos.x - g_posDescArr[indexOfNode].offset.x,
                            g_posDescArr[indexOfNode].pos.y - g_posDescArr[indexOfNode].offset.y);
                    }
                }
            }

            for (var indexOfNode = 0; indexOfNode < g_posArr.length; indexOfNode++) {
                if (g_posArr[indexOfNode].show) {
                    _cxt.drawImage(g_posArr[indexOfNode].tex2D,
                        g_posArr[indexOfNode].pos.x - g_posArr[indexOfNode].offset.x,
                        g_posArr[indexOfNode].pos.y - g_posArr[indexOfNode].offset.y);
                }
            }

            //// 显示飞机
            //if (g_stepCurrent > -1) {
            //    _cxt.drawImage(g_planeArr[g_posCurrent].tex2D,
            //        g_planePosArr[g_stepCurrent][0] - g_planeArr[g_posCurrent].offset.x,
            //        g_planePosArr[g_stepCurrent][1] - g_planeArr[g_posCurrent].offset.y);
            //}
            for (var index = 0; index < g_nodes.length; index++) {
                g_nodes[index].update(g_interval);
            }
            for (var index = 0; index < g_nodes.length; index++) {
                g_nodes[index].render(_cxt);
            }

            _cxt.textBaseline = 'top';
            _cxt.fillStyle = '#F00';
            _cxt.font = '30px Arial';
            for (var index = 0; index < g_nodeArr.length; index++) {
                if (g_nodeArr[index].data) {
                    var nodeData = g_nodeArr[index].data;
                    if (g_nodeArr[index].data.targetValue && g_nodeArr[index].data.value != g_nodeArr[index].data.targetValue) {
                        g_nodeArr[index].data.value += g_nodeArr[index].data.intervalValue;
                        if (nodeData.intervalValue > 0 && g_nodeArr[index].data.value > g_nodeArr[index].data.targetValue) {
                            g_nodeArr[index].data.value = g_nodeArr[index].data.targetValue;
                        } else if (nodeData.intervalValue < 0 && nodeData.value < nodeData.targetValue) {
                            nodeData.value = nodeData.targetValue;
                        }
                    }
                    var number = parseInt(g_nodeArr[index].data.value);
                    var length = _cxt.measureText(number);
                    _cxt.fillText(number, g_nodeArr[index].pos.x + (g_nodeArr[index].size.w - length.width) / 2,
                        g_nodeArr[index].pos.y + (g_nodeArr[index].size.h / 5 * 3));
                }
            }

            _cxt.textBaseline = 'top';
            _cxt.fillStyle = '#FFF';
            _cxt.font = '40px Arial';
            var timeString = getNowFormatYYMMDDHHMM();
            var timeLength = _cxt.measureText(timeString);
            _cxt.fillText(timeString, 1920 - timeLength.width - 50, 40);
        }

        // 循环处理数据请求
        function DataLoop(delta) {
            for (var index = 0; index < g_dataList.length; index++) {
                if (g_dataList[index].waiting >= 10000 && !g_dataList[index].isLoading) {
                    var dataEndpoint = g_dataList[index];
                    ajaxToServer(dataEndpoint);
                } else {
                    g_dataList[index].waiting += delta;
                }
            }
        }

        function ajaxToServer(dataEndpoint) {
            // 发送请求到服务器
            dataEndpoint.waiting = 0;
            dataEndpoint.isLoading = true;
            $.ajax({
                url: dataEndpoint.url,
                type: 'GET',
                dataType: 'json',
                timeout: 60000,
                cache: false,
                beforeSend: function () {
                }, //加载执行方法
                error: function () {
                    dataEndpoint.isLoading = false;
                },  //错误执行方法
                success: function (result) {
                    if (result.isSuccess) {
                        // 设置一个目标值，让动画来渐变
                        dataEndpoint.tag.targetValue = 60000 + Math.random() * 8000;
                        if (dataEndpoint.tag.targetValue != dataEndpoint.tag.value) {
                            dataEndpoint.tag.intervalValue = (dataEndpoint.tag.targetValue - dataEndpoint.tag.value) / 3000 * g_interval;
                            if (dataEndpoint.tag.intervalValue > 0 && dataEndpoint.tag.intervalValue < 1) {
                                dataEndpoint.tag.intervalValue = 1;
                            }
                            else if (dataEndpoint.tag.intervalValue < 0 && dataEndpoint.tag.intervalValue > -1) {
                                dataEndpoint.tag.intervalValue = -1;
                            }
                        }
                    }
                    dataEndpoint.isLoading = false;
                }//成功执行方法
            })
        }

        function getNowFormatYYMMDDHHMM() {
            var date = new Date();
            var seperator1 = "-";
            var seperator2 = ":";
            var month = date.getMonth() + 1;
            var strDate = date.getDate();
            var strHour = date.getHours();
            var strMinutes = date.getMinutes();
            if (month >= 1 && month <= 9) {
                month = "0" + month;
            }
            if (strDate >= 0 && strDate <= 9) {
                strDate = "0" + strDate;
            }
            if (strHour >= 0 && strHour <= 9) {
                strHour = "0" + strHour;
            }
            if (strMinutes >= 0 && strMinutes <= 9) {
                strMinutes = "0" + strMinutes;
            }
            var currentdate = date.getFullYear() + seperator1 + month + seperator1 + strDate
                    + " " + strHour + seperator2 + strMinutes;
            return currentdate;
        }
        init();
    </script>
    <script>
        $(document).ready(function () {
            register();
        });
    </script>
</body>
</html>